<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="wave-bg"></view>
			<view class="floating-fish fish-1"></view>
			<view class="floating-fish fish-2"></view>
			<view class="floating-fish fish-3"></view>
		</view>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- Logo区域 -->
			<view class="logo-section">
				<view class="logo-container">
					<image class="logo" src="/static/moshi_logo.png"></image>
					<view class="logo-glow"></view>
				</view>
				<view class="title-section">
					<text class="main-title">鱼邦</text>
					<text class="subtitle">智慧渔业管理平台</text>
				</view>
			</view>


			<!-- 输入区 -->
			<view class="form-container" v-if="showTraditionalLogin">
				<view class="input-group">
					<view class="input-row">
						<view class="input-wrapper">
							<image class="input-icon" src="/static/icon_phone.png" />
							<input class="modern-input" type="number" placeholder="请输入手机号" v-model="phone" />
						</view>
					</view>
					<view class="input-row">
						<view class="input-wrapper">
							<image class="input-icon" src="/static/icon_sms.png" />
							<input class="modern-input" type="number" placeholder="请输入验证码" v-model="code" />
							<button class="send-code-btn" @click="sendCode">发送验证码</button>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 底部按钮与协议 -->
		<!-- open-type="getPhoneNumber"  bindgetphonenumber="getPhoneNumber" -->
		<view class="bottom-area">
			<view class="bottom-buttons">
				<button v-if="!showTraditionalLogin" class="wechat-bottom-btn" @click="onQuickLoginTap"
					:disabled="isLogging">
					<text>{{ isLogging ? '登录中...' : '一键快捷登录' }}</text>
				</button>
				<button v-else class="wechat-bottom-btn phone-login-btn" :class="{ loading: isLogging }"
					:disabled="isLogging " @click="login"><!-- || !checked -->
					<view class="loading-spinner" v-if="isLogging"></view>
					<text>{{ isLogging ? '登录中...' : '立即登录' }}</text>
				</button>
				<button class="plain-bottom-btn" @click="toggleLoginMode">
					<text>{{ showTraditionalLogin ? '返回微信登录' : '手机号注册/登录' }}</text>
				</button>
			</view>
			<view class="bottom-protocol" @click="toggleProtocol">
				<view :class="['protocol-check', { 'checked': currentProtocolChecked }]">
					<text class="protocol-checkmark" v-if="currentProtocolChecked">✓</text>
				</view>
				<text class="protocol-text">我已阅读并同意</text>
				<text class="protocol-link" @click.stop="openProtocol">《用户服务协议》</text>
				<text class="protocol-link" @click.stop="openPrivacy">《隐私政策》</text>
			</view>
		</view>

		<!-- 协议弹窗 -->
		<view v-if="showProtocolPopup" class="protocol-popup-mask">
			<view class="protocol-popup">
				<text class="popup-title">{{ protocolPopupMode === 'phoneAuth' ? '手机号授权' : '服务协议及隐私政策' }}</text>
				<view class="popup-body">
					<text class="popup-text" v-if="protocolPopupMode === 'initial'">
						在使用本服务前，请先阅读并同意《用户服务协议》和《隐私政策》，请您务必仔细阅读充分理解条款内容后再同意。
					</text>
					<text class="popup-text" v-if="protocolPopupMode === 'phoneAuth'">
						请授权获取您的手机号，以便完成登录
					</text>
					<view class="popup-text">
						点击同意即表示你已阅读并同意
						<text class="popup-link" @click.stop="openProtocol">《用户服务协议》</text>
						和
						<text class="popup-link" @click.stop="openPrivacy">《隐私政策》</text>
					</view>
				</view>
				<view class="popup-actions">
					<button class="popup-btn cancel"
						@click="onProtocolCancel">{{ protocolPopupMode === 'phoneAuth' ? '取消' : '不同意' }}</button>
					<button class="popup-btn confirm" :open-type=" showTraditionalLogin ? '' :'getPhoneNumber'"
						@click="onProtocolCancel"
						@getphonenumber="onProtocolAgree">{{ protocolPopupMode === 'phoneAuth' ? '授权手机号' : '同意' }}</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import wechatApiService from '../../utils/api-service.js'
	import ErrorHandler from '../../utils/error-handler.js'
	import userManager from '../../utils/user-manager.js'
	import envHelper from '../../utils/env-helper.js'

	export default {
		data() {
			return {
				loginType: 'sms',
				phone: '',
				code: '',
				password: '',
				checked: false,
				wechatChecked: false, // 微信登录协议确认
				userInfo: null,
				isLoggedIn: false,
				phoneNumber: '',
				accessToken: '',
				openid: '',
				session_key: '',
				isDevelopment: false, // 开发环境标识
				showTraditionalLogin: false, // 是否显示传统登录
				isLogging: false, // 是否正在登录
				loginAttempts: 0, // 登录尝试次数
				maxLoginAttempts: 3, // 最大登录尝试次数
				showProtocolPopup: false,
				protocolPopupMode: 'initial' // 'initial' 或 'phoneAuth'
			}
		},
		computed: {
			// 当前登录方式的协议确认状态
			currentProtocolChecked() {
				return this.showTraditionalLogin ? this.checked : this.wechatChecked;
			}
		},
		onLoad() {
			// 设置开发环境标识
			this.setDevelopmentFlag()

			// 页面加载时检查是否已经登录
			this.checkLoginStatus()



		},
		methods: {
			/**
			 * 设置开发环境标识
			 */
			setDevelopmentFlag() {
				// 在微信小程序中，可以通过多种方式判断是否为开发环境
				// 方法1：通过编译模式判断
				// #ifdef MP-WEIXIN
				// 在微信开发者工具中，可以通过编译模式判断
				// 使用环境判断工具
				// this.isDevelopment = envHelper.isDevelopment()
				// this.loginWechat();
				// #endif


				// 打印环境信息
				envHelper.printEnvInfo()

				console.log('🔧 开发环境标识:', this.isDevelopment)
			},

			/**
			 * 检查登录状态
			 */
			checkLoginStatus() {
				try {
					// 检查是否有退出登录的标记
					const hasLoggedOut = uni.getStorageSync('hasLoggedOut')

					if (hasLoggedOut) {
						// 如果刚退出登录，清除标记并停留在登录页面
						uni.removeStorageSync('hasLoggedOut')
						console.log('🔄 检测到退出登录，停留在登录页面')
						return
					}
					//userManager.isLoggedIn()

					const phoneNumber = uni.getStorageSync('phoneNumber')
					console.log("phoneNumber--->" + phoneNumber)
					if (phoneNumber) {
						// const userInfo = userManager.getUserInfo()
						// this.userInfo = userInfo
						// this.isLoggedIn = true
						console.log('✅ 用户已登录:')

						// 如果已登录，直接跳转到首页
						uni.switchTab({
							url: '/pages/home/index'
						})
					} else {
						console.log('📱 用户未登录，停留在登录页面')
					}
				} catch (error) {
					ErrorHandler.handle(error, '检查登录状态')
				}
			},

			/**
			 * 发送验证码
			 */
			async sendCode() {
				if (!this.phone) {
					ErrorHandler.showInfo('输入错误', '请输入手机号')
					return
				}

				if (!this.validatePhone(this.phone)) {
					ErrorHandler.showInfo('输入错误', '请输入正确的手机号')
					return
				}

				try {
					ErrorHandler.showLoading('发送中...')
					// 这里应该调用真实的发送验证码API
					// await smsApi.sendCode({ phone: this.phone })

					setTimeout(() => {
						ErrorHandler.hideLoading()
						ErrorHandler.showSuccess('验证码已发送')
					}, 1000)
				} catch (error) {
					ErrorHandler.hideLoading()
					ErrorHandler.handle(error, '发送验证码')
				}
			},

			/**
			 * 验证手机号格式
			 */
			validatePhone(phone) {
				const phoneRegex = /^1[3-9]\d{9}$/
				return phoneRegex.test(phone)
			},



			/**
			 * 切换登录模式（微信/手机号）
			 */
			toggleLoginMode() {
				// 保存当前协议状态
				const currentProtocolChecked = this.currentProtocolChecked

				// 切换登录模式
				this.showTraditionalLogin = !this.showTraditionalLogin

				// 根据切换后的模式同步协议状态
				if (this.showTraditionalLogin) {
					// 切换到传统登录模式，将协议状态同步到checked
					this.checked = currentProtocolChecked
				} else {
					// 切换到微信登录模式，将协议状态同步到wechatChecked
					this.wechatChecked = currentProtocolChecked
				}

				// 切换模式时重置登录中的状态
				if (this.isLogging) {
					this.safeHideLoading()
				}
			},
			onQuickLoginTap() {
				console.log("this.this.wechatChecked>" + this.wechatChecked)
				if (this.isLogging) return

				if (!this.wechatChecked) {
					// 未勾选协议，显示协议弹窗（初始模式）
					this.protocolPopupMode = 'initial'
					this.showProtocolPopup = true
				} else {
					// 已勾选协议，直接触发手机号获取
					this.triggerPhoneNumberAuth()
				}

			},

			/**
			 * 触发手机号授权
			 */
			triggerPhoneNumberAuth() {
				console.log('📱 触发手机号授权')
				console.log("this.isLogging-->" + this.isLogging)
				if (this.isLogging) return

				// 显示协议弹窗，设置为手机号授权模式
				this.protocolPopupMode = 'phoneAuth'
				this.showProtocolPopup = true

				// 这里可以添加一些预处理逻辑
				// 手机号授权将通过协议弹窗的确认按钮触发
			},
			/**
			 * 传统登录方法（密码/验证码登录）
			 */
			async login() {
				console.log("立即登录")
				try {
					// 检查登录尝试次数
					if (this.loginAttempts >= this.maxLoginAttempts) {
						ErrorHandler.showInfo('登录限制', '登录尝试次数过多，请稍后再试')
						return
					}

					// 验证输入
					if (!this.validateLoginInput()) {
						return
					}

					// 检查协议同意
					if (!this.checked) {
						// ErrorHandler.showInfo('协议提示', '请先阅读并同意用户服务协议')
						this.showProtocolPopup = true

						console.log("this.showTraditionalLogin-->" + this.showTraditionalLogin)
						return
					}

					this.isLogging = true
					ErrorHandler.showLoading('登录中...')

					// 这里可以调用后端登录API
					// const result = await loginApi.login({
					//     phone: this.phone,
					//     code: this.code,
					//     password: this.password,
					//     type: this.loginType
					// })

					// 模拟登录成功
					setTimeout(() => {
						// 安全地隐藏加载状态
						this.safeHideLoading()
						ErrorHandler.showSuccess('登录成功')

						// 重置登录尝试次数
						this.loginAttempts = 0

						// 跳转到首页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1500)
					}, 2000)

				} catch (error) {
					// 安全地隐藏加载状态
					this.safeHideLoading()
					this.loginAttempts++
					ErrorHandler.handle(error, '传统登录')
				}
			},
			onProtocolCancel() {
				this.showProtocolPopup = false
				if (this.showTraditionalLogin) {
					this.checked = !this.checked;
					// 安全地隐藏加载状态
					this.safeHideLoading()
					ErrorHandler.showSuccess('登录成功')

					// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}, 1500)
				}
			},
			onProtocolAgree1() {
				console.log("同意")
				this.showProtocolPopup = false
			},
			onProtocolAgree(e) {
				// || !showTraditionalLogin
				this.showProtocolPopup = false
				console.log("protocolPopupMode-->" + this.protocolPopupMode)
				if (this.isLogging) return

				if (this.protocolPopupMode === 'initial') {
					// 初始模式：设置协议勾选状态，然后直接触发手机号授权
					this.wechatChecked = true
					// this.triggerPhoneNumberAuth()
					this.getPhoneNumber(e)
				} else {
					// 手机号授权模式：直接调用手机号获取，跳过openID获取
					this.getPhoneNumber(e)
				}
			},
			openPrivacy() {
				uni.navigateTo({
					url: '/pages/protocol/index?type=privacy'
				})
			},

			/**
			 * 验证登录输入
			 */
			validateLoginInput() {
				if (!this.phone) {
					ErrorHandler.showInfo('输入错误', '请输入手机号')
					return false
				}

				if (!this.validatePhone(this.phone)) {
					ErrorHandler.showInfo('输入错误', '请输入正确的手机号')
					return false
				}

				if (!this.code) {
					ErrorHandler.showInfo('输入错误', '请输入验证码')
					return false
				}

				return true
			},


			/**
			 * 微信登录入口
			 */
			loginWechat() {
				console.log("🚀 微信登录开始")

				if (!this.wechatChecked) {
					ErrorHandler.showInfo('协议提示', '请先阅读并同意用户服务协议')
					return
				}

				// 检查是否在微信小程序环境中
				// #ifdef MP-WEIXIN
				// this.handleWechatLogin()
				// #endif

				// #ifndef MP-WEIXIN
				ErrorHandler.showInfo('环境错误', '请在微信小程序中使用')
				// #endif
			},

			/**
			 * 微信登录完整流程
			 */
			async handleWechatLogin() {
				try {
					this.isLogging = true
					ErrorHandler.showLoading('微信登录中...')



					console.log('✅ 微信登录成功:', loginResult)

					// 保存登录数据
					userManager.saveWechatLoginData(loginResult)
					userManager.saveLoginCode(loginResult.code)

					// 更新页面数据
					this.session_key = loginResult.session_key
					this.isLoggedIn = true

					// 安全地隐藏加载状态
					this.safeHideLoading()
					ErrorHandler.showSuccess('微信登录成功')

					console.log('📱 微信登录完成，请获取手机号以完成注册')

				} catch (error) {
					// 安全地隐藏加载状态
					this.safeHideLoading()
					ErrorHandler.handle(error, '微信登录', true)
				}
			},


			/**
			 * 获取微信手机号（微信登录第二步）
			 * @param {Object} e 获取手机号码数据
			 */
			async getPhoneNumber(e) {
				this.showProtocolPopup = false
				console.log('📱 获取手机号事件:', e)

				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					try {
						// 检查协议同意
						if (!this.wechatChecked) {
							ErrorHandler.showInfo('协议提示', '请先阅读并同意用户服务协议')
							return
						}

						// 显示加载状态
						this.isLogging = true
						ErrorHandler.showLoading('获取手机号中...')

						// 获取手机号 - 使用微信小程序推荐的code方式
						const phoneResult = await wechatApiService.getPhoneNumber({
							code: e.detail.code
						})

						console.log('✅ 获取手机号成功:', phoneResult)
						this.phoneNumber = phoneResult.phoneNumber

						// 保存手机号信息
						userManager.savePhoneData({
							phoneNumber: this.phoneNumber
						})

						// 设置登录状态
						this.isLoggedIn = true

						// 安全地隐藏加载状态
						this.safeHideLoading()
						ErrorHandler.showSuccess('登录成功')

						// 跳转到首页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1500)

					} catch (error) {
						// 安全地隐藏加载状态
						this.safeHideLoading()
						console.error('❌ 获取手机号失败:', error)
						ErrorHandler.handle(error, '获取手机号')
					}
				} else {
					console.log('❌ 用户拒绝授权手机号:', e.detail.errMsg)
					ErrorHandler.showInfo('授权失败', '需要授权手机号才能使用微信登录')
				}
			},






			openProtocol() {
				uni.navigateTo({
					url: '/pages/protocol/index'
				});
			},

			/**
			 * 切换协议确认状态
			 */
			toggleProtocol() {
				if (this.showTraditionalLogin) {
					this.checked = !this.checked;
				} else {
					this.wechatChecked = !this.wechatChecked;
				}
			},

			/**
			 * 安全地隐藏加载状态
			 */
			safeHideLoading() {
				try {
					this.isLogging = false
					// 使用try-catch包装hideLoading调用
					ErrorHandler.hideLoading()
				} catch (error) {
					console.warn('隐藏加载状态时出现错误:', error)
					// 如果hideLoading失败，至少确保isLogging状态被重置
					this.isLogging = false
				}
			},

		}

	}
</script>

<style scoped lang="scss">
	.login-container {
		background: linear-gradient(135deg, $primary -30%, $secondary 60%);

		// background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}

	/* 背景装饰 */
	.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.wave-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 200rpx;
		background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
		border-radius: 50% 50% 0 0;
		transform: scale(1.5);
	}

	.floating-fish {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		animation: float 6s ease-in-out infinite;
	}

	.fish-1 {
		top: 20%;
		left: 10%;
		animation-delay: 0s;
	}

	.fish-2 {
		top: 60%;
		right: 15%;
		animation-delay: 2s;
	}

	.fish-3 {
		top: 40%;
		left: 80%;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0px) rotate(0deg);
		}

		50% {
			transform: translateY(-20rpx) rotate(180deg);
		}
	}

	/* 主要内容 */
	.main-content {
		position: relative;
		z-index: 2;
		padding: 120rpx 40rpx 320rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* Logo区域 */
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.logo-container {
		position: relative;
		margin-bottom: 30rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	}

	.logo-glow {
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		right: -10rpx;
		bottom: -10rpx;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
		border-radius: 50%;
		animation: glow 2s ease-in-out infinite alternate;
	}

	@keyframes glow {
		from {
			opacity: 0.5;
		}

		to {
			opacity: 1;
		}
	}

	.title-section {
		text-align: center;
	}

	.main-title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: $text-white;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 400;
	}

	/* Tab切换 */
	.tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.tab {
		background: rgba(255, 255, 255, 0.1);
		border-radius: $radius-xl;
		padding: 16rpx 32rpx;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.tab.active {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.tab-text {
		font-size: $font-md;
		color: $text-white;
		font-weight: 500;
		letter-spacing: 1rpx;
	}

	.tab.active .tab-text {
		font-weight: 600;
	}

	/* 表单容器 */
	.form-container {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.input-group {
		background: rgba(255, 255, 255, 0.15);
		border-radius: $radius-xl;
		padding: 40rpx;
		backdrop-filter: blur(20rpx);
		margin-bottom: 30rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	.input-row {
		margin-bottom: 24rpx;
	}

	.input-row:last-child {
		margin-bottom: 0;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.95);
		border-radius: $radius-lg;
		padding: 0 24rpx;
		transition: all 0.3s ease;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.input-wrapper:focus-within {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0 4rpx rgba(30, 136, 229, 0.2), 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		border-color: rgba(30, 136, 229, 0.3);
		transform: translateY(-2rpx);
	}

	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
		opacity: 0.6;
	}

	.modern-input {
		flex: 1;
		border: none;
		background: transparent;
		font-size: $font-md;
		color: $text-primary;
		padding: 24rpx 0;
		height: 88rpx;
		line-height: 88rpx;
	}

	.modern-input::placeholder {
		color: $text-tertiary;
	}

	.send-code-btn {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		color: $text-white;
		border: none;
		border-radius: $radius-lg;
		padding: 0 20rpx;
		font-size: $font-sm;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 4rpx 16rpx rgba(30, 136, 229, 0.3);
		transition: all 0.3s ease;
		letter-spacing: 0.5rpx;
	}

	.send-code-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(30, 136, 229, 0.4);
	}


	/* 登录按钮 */
	.modern-login-btn {
		width: 100%;
		height: 96rpx;
		background: linear-gradient(135deg, $text-white 0%, rgba(255, 255, 255, 0.95) 100%);
		color: $primary;
		border: none;
		border-radius: $radius-xl;
		font-size: $font-lg;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		letter-spacing: 1rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.modern-login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
	}

	.modern-login-btn.loading {
		opacity: 0.8;
	}

	.modern-login-btn:disabled {
		opacity: 0.6;
		transform: none;
	}

	.btn-text {
		font-weight: 600;
	}

	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid rgba(30, 136, 229, 0.3);
		border-top: 3rpx solid $primary;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 12rpx;
	}

	/* 微信登录区域 */
	.wechat-login-section {
		width: 100%;
		margin-top: 40rpx;
	}


	.divider {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}

	.divider-line {
		flex: 1;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.3);
	}

	.divider-text {
		margin: 0 20rpx;
		font-size: $font-sm;
		color: rgba(255, 255, 255, 0.7);
	}

	.wechat-login-btn {
		width: 100%;
		height: 96rpx;
		background: linear-gradient(135deg, #ffffff 0%, #f2f9ff 100%);
		border: none;
		border-radius: $radius-xl;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 12rpx 28rpx rgba(12, 118, 66, 0.18);
		transition: all 0.3s ease;
	}

	.wechat-login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 8rpx 16rpx rgba(12, 118, 66, 0.22);
	}

	.wechat-login-btn:disabled {
		opacity: 0.6;
		transform: none;
		box-shadow: none;
	}

	.wechat-icon-wrapper {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wechat-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.wechat-text {
		font-size: $font-md;
		color: #0b5f38;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.phone-login {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
	}

	.phone-btn {
		background: #07c160;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.phone-btn::after {
		border: none;
	}

	.info-login {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
	}

	.info-btn {
		background: #3b6ca8;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.info-btn::after {
		border: none;
	}

	.debug-buttons {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin: 20rpx 0;
	}

	.debug-btn {
		background: #f5f5f5;
		color: #666;
		border: 1rpx solid #ddd;
		border-radius: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 24rpx;
	}

	.debug-btn.info-btn {
		background: #3b6ca8;
		color: #fff;
		border-color: #3b6ca8;
	}

	.debug-btn.clear-btn {
		background: #ff6b6b;
		color: #fff;
		border-color: #ff6b6b;
	}

	.debug-btn.logout-btn {
		background: #ffa500;
		color: #fff;
		border-color: #ffa500;
	}

	.debug-btn::after {
		border: none;
	}

	/* .protocol {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #888;
		margin-top: 20rpx;
	} */

	.protocol {
		position: absolute;
		bottom: 0;
		/* 距离父容器底部的距离，可根据需要调整 */
		left: 50%;
		transform: translateX(-50%);

		/* 水平居中 */
		font-size: 22rpx;
		color: #888;
		/* 可以根据需要添加一些底部间距 */
		margin-bottom: 50rpx;
		white-space: nowrap;
	}

	.protocol text {
		white-space: nowrap;
		/* 强制文字在一行显示，不换行 */
	}

	.link {
		color: #3b6ca8;
		margin-left: 6rpx;
	}

	/* 登录切换 */
	.login-switch {
		text-align: center;
		margin-top: 40rpx;
	}

	.switch-text {
		color: rgba(255, 255, 255, 0.8);
		font-size: $font-md;
		text-decoration: underline;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.switch-text:active {
		color: $text-white;
		transform: scale(0.95);
	}

	.wechat-btn:disabled {
		opacity: 0.6;
	}

	.login-btn:disabled {
		opacity: 0.6;
		background: #ccc;
	}

	/* 底部协议确认 */
	.bottom-area {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(env(safe-area-inset-bottom) + 160rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 40rpx;
		z-index: 20;
		pointer-events: none;
	}

	.bottom-buttons {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		pointer-events: auto;
	}

	.wechat-bottom-btn,
	.plain-bottom-btn {
		width: 100%;
		height: 96rpx;
		border-radius: 999rpx;
		font-size: $font-lg;
		font-weight: 600;
		letter-spacing: 1rpx;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
	}

	.wechat-bottom-btn {
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		color: #fff;
		border: none;
		box-shadow: 0 16rpx 36rpx rgba(51, 136, 255, 0.25);
	}

	.wechat-bottom-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 26rpx rgba(51, 136, 255, 0.22);
	}

	.wechat-bottom-btn:disabled {
		opacity: 0.6;
		transform: none;
		box-shadow: none;
	}

	.plain-bottom-btn {
		background: rgba(255, 255, 255, 0.96);
		border: 2rpx solid rgba(0, 0, 0, 0.2);
		color: #111;
		box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.plain-bottom-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.phone-login-btn.loading {
		opacity: 0.7;
	}

	.bottom-protocol {
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		font-size: 22rpx;
		color: rgba(0, 0, 0, 0.6);
		pointer-events: auto;
	}

	.protocol-check {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.25);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		background: rgba(255, 255, 255, 0.9);
	}

	.protocol-check.checked {
		background: $primary;
		border-color: $primary;
		box-shadow: 0 6rpx 16rpx rgba(51, 136, 255, 0.25);
	}

	.protocol-checkmark {
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
	}

	.protocol-text {
		color: rgba(0, 0, 0, 0.65);
	}

	.protocol-link {
		color: $primary;
		text-decoration: underline;
		font-weight: 500;
	}

	.protocol-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.55);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.protocol-popup {
		width: 100%;
		max-width: 640rpx;
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.18);
		overflow: hidden;
	}

	.popup-title {
		display: block;
		padding: 36rpx 48rpx 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #111;
		text-align: center;
	}

	.popup-body {
		padding: 0 48rpx 20rpx;
		font-size: 26rpx;
		line-height: 1.6;
		color: rgba(0, 0, 0, 0.75);
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.popup-text {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.75);
	}

	.popup-link {
		color: $primary;
		text-decoration: underline;
		font-weight: 600;
	}

	.popup-actions {
		display: flex;
		border-top: 1rpx solid rgba(0, 0, 0, 0.08);
	}

	.popup-btn {
		display: flex;
		flex: 1;
		border: none;
		height: 96rpx;
		font-size: 30rpx;
		font-weight: 600;
		background: transparent;
		align-items: center;
		justify-content: center;
		color: #111;
		border-radius: 0;
	}

	.popup-btn::after {
		border: none;
	}

	.popup-btn.cancel {
		color: $primary;
		background: #fff;
		border-right: 1rpx solid rgba(0, 0, 0, 0.08);
	}

	.popup-btn.confirm {
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		color: #fff;
	}
</style>